import React, { useState } from 'react'
import { Card, Button, Table, Upload } from "antd"
import useExportExcle from '../../hooks/useExportExcle'

export default function Main() {
  const [dataSource, setDataSource] = useState([
    { column_1: "bobo", column_2: "成都", column_3: "武侯区" }
  ])
  const { handleExportAll,uploadProps } = useExportExcle()
  const header = {
    "column_1": "表头1",
    "column_2": "表头2",
    "column_3": "表头3"
  }
  const fileName = "我的表格"
  // 表头的数据
  const columns = [
    {
      title: '表头1',
      dataIndex: 'column_1',
    },
    {
      title: '表头二',
      dataIndex: 'column_2',
    },
    {
      title: '表头三',
      dataIndex: 'column_3',
    }
  ];

  return (
    <>
      <Upload {...uploadProps}>
        <Button type="primary" >Excel导入</Button>
      </Upload>
      <Card
        title={"列表"}
        extra={<Button onClick={() => handleExportAll(header, dataSource, fileName)} type='primary'>导出</Button>}
        style={{
          width: "100%",
        }}
        loading={false}
      >
        <Table
          dataSource={dataSource}
          columns={columns}
          rowKey="_id"
          bordered={true}
          loading={false}
          pagination={{ defaultCurrent: 1, defaultPageSize: 6, showSizeChanger: true, pageSizeOptions: [3, 6, 9], showQuickJumper: true }}

        />
      </Card>
    </>
  )
}
